<template>
  <div class="content-container">
    <component :is="componentsMap[currentComponent]" />
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
import Content1 from './Content1.vue';
import Content2 from './Content2.vue';
// 新增引入 mqtt.vue 组件
import Mqtt from './mqtt.vue';

defineProps({
  currentComponent: {
    type: String,
    required: true
  }
});

const componentsMap = {
  Content1,
  Content2,
  // 新增 mqtt 组件映射
  Mqtt
};
</script>

<style scoped>
.content-container {
  flex: 1;
  width: 90vw;
  padding: 20px;
  background-color: #ffffff;
  min-height: 100vh;
}
</style>